//问卷类
let question = new Object();
question.title = ''

//记录问卷问题的数组
let questionsNum = []

//生成文件的HTML代码的数组
let array = []

//生成发布问卷时提示
//赋值产生遮罩的节点
const pubTips0 = document.getElementById("pub-tips")
const pubTips1 = document.getElementById("pub-confirm")
const pubTips2 = document.getElementById("pub-cancel")
const time = document.getElementById("time")
const pubTu = document.getElementById("pub-tu")

//显示提示函数
function pubTips() {
  getDay()
  pubTips0.style.display = "block"
  time.innerText = `(截止日期为${question.date})`
}

//确认取消事件的绑定
pubTips1.onclick = function () {
  pubTips0.style.display = "none"
  savePublish(1)
}

//退出提示
function quitpubTips() {
  pubTips0.style.display = "none"
}

pubTips2.onclick = quitpubTips

pubTu.onclick = quitpubTips




//删除问卷时的提示
//存储删除的索引
let delNum = -1
//定义删除的提示的节点
const delTips0 = document.getElementById("del-tips")
const delTips1 = document.getElementById("del-confirm")
const delTips2 = document.getElementById("del-cancel")
const delTu = document.getElementById("del-tu")


//是否显示删除的提示
function showDelTips(show) {
  delTips0.style.display = show ? "block" : "none";
}

//为提示内的按钮绑定事件
delTips1.onclick = function () {
  showDelTips(false);
  array.splice(delNum, 1);
  let tabDelete = document.getElementById(`tab-delete${delNum}`);
  //删除并且修改本地记录的数组
  if (array.length == 0) {
    localStorage.removeItem("array");
  } else {
    localStorage.setItem("array", JSON.stringify(array));
  }

  tabDelete.parentNode.parentNode.style.display = "none";
  tabPage();
}

//关闭提示
delTips2.onclick = function () {
  showDelTips(false);
}

//关闭提示
delTu.onclick = function () {
  showDelTips(false);
}

//问卷的代码
//定义问卷上的节点
const tab = document.querySelector('.tab');
const tabFooter = document.querySelector('.tab-footer');
const tabAdd = document.querySelector('.tab .tab-add');
const tabSelect = document.querySelector("#selectAll");
const tabDel = document.querySelector("#allDel")
//问卷的复选框
let tabInputAll;


//为新增问卷按钮绑定事件
tabAdd.addEventListener('click', newQuestion)



//删除选择的内容
tabDel.onclick = function () {
  for (let i = 0; i < tabInputAll.length; i++) {
    if (tabInputAll[i].checked == true) {
      array.splice(0, 1)
    }
  }
  localStorage.removeItem("array")
  tabSelect.checked = false
  tabPage()
}

// 判断全部选项是否全选了
tabSelect.onclick = function () {
  tabInputAll.forEach(input => {
    input.checked = tabSelect.checked;
  });
};


// 展示问卷列表
function tabPage() {
  let tabData = document.querySelector(".tab .tabTemp")
  if (tabData !== null) {
    tab.removeChild(tabData)
  }
  let listDataNull = document.querySelector('.tab .tab-data-null')
  if (listDataNull !== null) {
    listDataNull.remove()
  }
  tabFooter.style.display = "block"
  tabShow()
}



// 显示我填写过的问卷
function tabShow() {
  let divTemp = document.createElement('div')
  divTemp.classList.add("tabTemp")
  tab.insertBefore(divTemp, tabFooter)
  for (let i in array) {
    let state
    if (array[i].state == 0) {
      state = "未发布"
    }
    if (array[i].state == 1) {
      state = "发布中"
    }
    if (array[i].state == 2) {
      state = "已结束"
    }
    let divNode = document.createElement('div')
    divNode.classList.add("tab-child")
    divNode.innerHTML = `<input type="checkbox">
                       <span>${array[i].title}</span>
                       <span>${array[i].date}</span>
                       <span style="color:;">${state}</span>
                       <span>
                       <div id="tab-edit${i}">编辑</div>
                       <div id="tab-delete${i}">删除</div>
                       <div id="tab-data${i}">查看数据</div>
                       </span>`
    divTemp.appendChild(divNode)

    //文件的删除按钮点击事件
    let tabDelete = document.getElementById(`tab-delete${i}`)
    tabDelete.onclick = function () {
      delNum = i
      delTips0.style.display = "block"
    }

    //文件的编辑按钮点击事件
    let tabeditor = document.getElementById(`tab-edit${i}`)
    tabeditor.onclick = function () {
      edit2(i)
    }

    //查看数据点击事件
    let tabdata = document.getElementById(`tab-data${i}`)
    tabdata.onclick = function () {
      tab.style.display = "none"
      record.style.display = "block"
      createChart()
    }
  }

  //判断是否全部勾选
  tabInputAll = document.querySelectorAll('.tab .tab-child input');
  for (let i = 0; i < tabInputAll.length; i++) {
    tabInputAll[i].addEventListener('click', function () {
      selsctAll()
    })
  }
}

//判断问卷列表是否全选
function selsctAll() {
  let num = 0;
  for (let i = 0; i < tabInputAll.length; i++) {
    if (tabInputAll[i].checked == true) {
      num++;
    }
  }
  if (num == tabInputAll.length) {
    tabSelect.checked = true
  } else {
    tabSelect.checked = false
  }
}

//新增问卷
//定义节点
const construct = document.querySelector('.construct')
const constructOne = document.querySelector(".construct-one")

//新建问卷按钮点击事件
constructOne.onclick=function(){
  newQuestion()
}

//页面的展示
function constructPage() {
  title0.value = ''
  tab.style.display = "none"
  construct.style.display = "block"
}

//问卷的编辑页
//定义节点
const editor = document.querySelector('.editor')
const editorAdd = document.querySelector('.editor .editor-add')
const one = document.querySelector(".editor .editor-add-option .one")
const two = document.querySelector(".editor .editor-add-option .two")
const three = document.querySelector(".editor .editor-add-option .three")
const editorAddOption = document.querySelector(".editor .editor-add-option")
const title0 = document.querySelector("#title")
const date0 = document.querySelector(".editor .editor-footer #date")
const editorSave = document.querySelector(".editor .editor-footer .editor-footer-right .save")
const editorPub = document.querySelector(".editor .editor-footer .editor-footer-right .pub")

//单选题html
const radioHtml = `<p>Q1&nbsp;&nbsp;单选题</p>
<input type="radio"  name="单选" value="选项一">
<span>选项一</span><br />
<input type="radio"  name="单选" value="选项二">
<span>选项二</span>`;

//多选题html
const checkboxHtml = `<p>Q2&nbsp;&nbsp;多选题</p>
<input type="checkbox">
<span>选项一</span> <br />
<input type="checkbox">
<span>选项二</span> <br />
<input type="checkbox">
<span>选项三</span> <br />
<input type="checkbox">
<span>选项四</span> <br />`;

//文本题html
const textHtml = `<p>Q3&nbsp;&nbsp;文本题</p>
<textarea rows="5" cols="70"> 
</textarea>`;

//添加问题点击事件
let node = document.createElement('div')
node.classList.add("editTemp")
editorAdd.onclick = function () {
  tabAddEvent(node)
}

//问题三个按钮点击事件
one.onclick = function () {
  checkedEvent(this)
}

two.onclick = function () {
  checkedEvent(this)
}

three.onclick = function () {
  checkedEvent(this)
}


//发布或者保存两个按钮点击事件
editorSave.onclick = function () {
  savePublish(0)
}

editorPub.onclick = function () {
  pubTips()
}

//新问卷
function newQuestion() {
  construct.style.display = "none"
  tab.style.display = "none"
  editor.style.display = "block"
}

//编辑按钮点击事件
function edit2(i) {
  const { storageNum, title, date } = array[i];

  tab.style.display = "none";
  newQuestion();

  storageNum.forEach((m) => {
    const divNode =
      m === 1
        ? createElement("div", "radio", radioHtml)
        : m === 2
          ? createElement("div", "checkbox", checkboxHtml)
          : createElement("div", "text", textHtml);

    node.appendChild(divNode);
  });

  editor.insertBefore(node, editorAddOption);
  date0.value = date;
  title0.value=title;
  question.date=date;
  question.title=title;

  question.list = node;
  questionsNum = storageNum;
  array.splice(i, 1);
}

function createElement(tagName, className, innerHTML) {
  const element = document.createElement(tagName);
  element.classList.add(className);
  element.innerHTML = innerHTML;
  return element;
}


// 添加问题事件
function tabAddEvent(node) {
  let divNode
  //判断是否选择单选
  if (!(one.className.indexOf('checked') == -1)) {
    divNode = document.createElement("div")
    divNode.classList.add("radio")
    divNode.innerHTML = radioHtml
    questionsNum.push(1)
  }

  //判断是否选择多选
  if (!(two.className.indexOf('checked') == -1)) {
    divNode = document.createElement("div")
    divNode.classList.add("checkbox")
    divNode.innerHTML = checkboxHtml
    questionsNum.push(2)
  }

  //判断是否选择了文本按钮
  if (!(three.className.indexOf('checked') == -1)) {
    divNode = document.createElement("div")
    divNode.classList.add("text")
    divNode.innerHTML = textHtml
    questionsNum.push(3)
  }

  if (typeof (divNode) !== "undefined") {
    node.appendChild(divNode)
    editor.insertBefore(node, editorAddOption)
  }
  question.list = node
  //清除高亮
  checkedEvent('clear');
}

// 获取结束的日期
function getDay() {
  question.date = date0.value
}


// 获取问卷标题
title0.onblur = function () {
  if (this.value.length === 0) {
    question.title = "这里是标题"
  }
  else {
    question.title = this.value
  }
}

//清除问卷编辑页
function clear() {
  title0.value=''
  date0.value=''
  let editTempNode = document.querySelector(".editTemp")
  if (editTempNode !== null) {
    editor.removeChild(editTempNode)
    node = document.createElement('div')
    node.classList.add("editTemp")
  }
}



// 保存和发布
function savePublish(num) {
  getDay();
  question.title = question.title.length === 0 ? "这里是标题" : question.title;
  question.state = num === 0 ? 0 : 1;
  clear();
  const dataTemp = { ...question };
  dataTemp.storageNum = [...questionsNum];
  array.push(dataTemp);
  console.log('array', array);
  //清空对象里的值
  question=new Object();
  question.title = ''
  questionsNum = [];
  console.log("22222222222222",question.title)
  // question = { title: '', questionsNum: [] };
  //记录在LocalStorage内
  localStorage.setItem("array", JSON.stringify(array));
  editor.style.display = "none";
  tab.style.display = "block";
  tabPage();
}

//被选中的类部分
function removeChecked() {
  one.classList.remove("checked")
  two.classList.remove("checked")
  three.classList.remove("checked")
}

// 选中后添加高亮
function checkedEvent(a) {
  removeChecked()
  if (a === 'clear') {
    return
  }
  a.classList.add("checked")
}

//初始化
if (localStorage.getItem("array") !== null) {
  construct.style.display = "none"
  tab.style.display = "block"
  array = JSON.parse(localStorage.getItem("array"))
  tabPage()
}

//数据页
//定义节点
const record = document.querySelector(".record")
const returnNode = document.getElementById("return")

// 返回按钮点击事件
returnNode.onclick = function () {
  record.style.display = "none"
  tab.style.display = "block"
  tabPage()
}

// 渲染图表
function createChart() {
  let radioChart1 = echarts.init(document.getElementById('radio1'));
  let radioChart2 = echarts.init(document.getElementById('radio2'));
  let radioChart3 = echarts.init(document.getElementById('radio3'));

  let option = {
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          },
          {
            value: 1548,
            name: '搜索引擎'
          },
        ]
      }
    ]
  };

  radioChart1.setOption(option);
  radioChart2.setOption(option);
  radioChart3.setOption(option);
}


